﻿@model BlogPost
@{
    Layout = null;
    HtmlHelper.UnobtrusiveJavaScriptEnabled = true; 
}
<!DOCTYPE html>

<html>
<head>
    <title>@Model.Title</title>
    @Html.Partial("SharedHead")
    <link href="@Url.Content("~/Content/Article/Article.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
            head.js(
        "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js",
        "http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js",
        "@Url.Content("~/Content/Sidebar/Sidebar.dynamic.js")",
        "@Url.Content("~/Content/Article/jquery.validate.js")",
        "@Url.Content("~/Content/Article/Article.js")",
        function () {
            $.sideBar();
            $.article();

            $("#commentInputTemplate").tmpl({
                ID: -1,
                BlogPost: @Model.ID
            }).appendTo("#comments");
            
            var comments = @Html.Raw(ViewData["commentsJson"].ToString());

            $("#commentTemplate").tmpl(comments).appendTo("#comments");

            $.article.refreshAnchor();

            $.article.validatationSetup();
        });
    </script>
</head>
<body style="background: url(@Url.Content("~/Content/Article/ArticleBackground.png")) no-repeat center center fixed; background-color: #005490;">
    <article>
        <header>
            <h1 class="websiteTitle">@Model.Title</h1>
            <img class="headshot" src="@Url.Content("~/Content/headshot.png")" alt="Justin Angel picture" />
            <h2 class="nameTitle"><span id="firstName">Justin</span><br /><span id="surName">Angel</span></h2>
        </header>

        <section id="articleContent">
        @Html.Raw(Model.HTML)
        </section>

        <footer id="footerContent">
            Published on @Model.DateCreated by @Model.User.DisplayName ©@DateTime.Now.Year. <br /> 
            This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
        </footer> 
    
        <br /><br />
        <div id="comments">
            <h2>Comments</h2>
            <script id="commentTemplate" type="text/x-jquery-tmpl">
                <div class="commentContainer">
                    <a name="comment${ID}" />
                    <img class="gravatar" src="${gravatar}?d=identicon"  />
                    <div class="commentContent">
                        <p class="commentTitle">${name} Says:</p>
                        <div>
                            {{html text}}
                        </div>
                        <input class="expandCommentButton cancel" type="button" value="Respond to ${name}" id="expandComment${ID}">
                        <div id="leaveComment${ID}" style="display: none;">
                             {{tmpl "#commentInputTemplate"}}
                        </div>  
                    </div> 
                    {{tmpl(comments) "#commentTemplate"}}
                </div>
            </script>
            <script id="commentInputTemplate" type="text/x-jquery-tmpl">
                <div class="postCommentContainer">
                    <form action="@Model.Permlink/NewComment" method="post" id="form${ID}">
                        <span class="fieldName">Name:</span>
                        <span class="fieldValue"><input type="text" Name="name" class="required" minlength="2" /></span>
                         
                        <br />
                        <span class="fieldName">Email:</span>
                        <span class="fieldValue"><input type="text" name="Email" /></span>
                        <br />
                        <span class="fieldName" style="vertical-align: top;">Message:</span>
                        <span class="fieldValue"><textarea name="text"></textarea></span>
                        <br />
                        <input type="hidden" name="ID" value="${ID}" />
                        <input type="hidden" name="BlogPost" value="${BlogPost}" />
                        <input class="postButton" type="submit" value="Share My Thoughtful Observations!"  />
                    </form>
                </div> 
            </script>
        </div>
    </article>
    
    @Html.Partial("SharedSidebar", @ViewData["SidebarModel"])
</body>
</html>
